<template>
	<view>
		<view class="navbar"
			:style="'height:'+navH+'px;background-color:'+setting.bgColor+';padding-top:'+navtop+'px;color:'+setting.titleColor+';line-height:'+useHeight+'px;'">
			<view class="valid" :style="'width:'+validWidth+'px;padding: 0 10px 0 '+textPaddingLift+'px'">
				<view class="navbar-action iconfont icon-down1" v-if="setting.showNav&&showTypes==0" @click="navBack()">
				</view>
				<view class="navbar-action iconfont icon-zhuye" v-if="setting.showNav&&showTypes==1" @click="goIndex()">
				</view>
				<navigator url="/home/index/cityposition" hover-class="none" class="navbar-action"
					v-if="setting.position == 'index'">
					<text>{{setting.city}}</text>
					<text class="iconfont icon-xwtubiaoku-12"></text>
				</navigator>
				<view class='navbar-title' :style="'height:'+useHeight+'px;'">{{setting.name||'古树之道'}}</view>
			</view>
		</view>
		<view class="zd" :style="'height:'+navH+'px;background-color:'+setting.bgColor"></view>
	</view>
</template>

<script>
	import App from '../App.vue';
	var _this;
	export default {
		props: {
			setting: {
				type: Object
			}
		},
		data() {
			return {
				navH: 0,
				navtop: 0,
				useHeight: 0,
				menuH: 0,
				validWidth: 0,
				textPaddingLift: 0,
				showTypes: 0,
			}
		},
		mounted: function() {
			_this = this
			// 胶囊高度加上距离头部高度
			_this.navH = App.globalData.navHeight;
			// 胶囊距离头部高度
			_this.navtop = App.globalData.navTop;
			// 文字内容使用的有效高度
			_this.useHeight = App.globalData.useHeight;
			// 胶囊按钮距离左边宽度
			_this.validWidth = App.globalData.ButtonLeft;
			_this.textPaddingLift = App.globalData.textPaddingLift + 10;
			//胶囊高度
			_this.menuH = App.globalData.menuH
			// 判断是否为分享进入 true分享进入
			if (!wx.getStorageSync('share')) {
				_this.showTypes = _this.showType == 0 ? (App.globalData.share ? 1 : 0) : 1
				_this.$forceUpdate()
			}
			wx.setStorageSync("share", true)
		},
		methods: {
			navBack() {
				if (this.setting.position == 'submit') {
					uni.showModal({
						title: '确认退出',
						content: '退出后编辑的内容不会被保存！',
						confirmColor: "#666666",
						cancelColor: "#38BE8C",
						success: function(res) {
							if (res.confirm) {
								uni.navigateBack({
									delta: 1
								})
							}
						}
					});
				} else {
					uni.navigateBack({
						delta: 1
					})
				}
			},
			goIndex: function() {
				uni.reLaunch({
					url: "/pages/index/index"
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zd {
		width: 100%;
	}

	.navbar {
		overflow: hidden;
		z-index: 55;
		position: fixed;
		top: 0;
		left: 0;
		transition: all 0.3s;
		width: 100%;

		.valid {
			position: relative;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;

			.navbar-action {
				position: absolute;
				left: 20rpx;
				width: 40rpx;
				text-align: center;
				font-size: 34rpx;
				display: flex;
				flex-direction: row;
				align-items: center;

				text {
					font-size: 28rpx;
					color: #fff;
					margin-right: 13rpx;
				}
			}

			.navbar-title {
				font-size: 30rpx;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				font-weight: bold;
			}
		}
	}
</style>
